<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    
    <div id="root">
         
        姓：<input type="text" v-model="firstName"><br/>
        名：<input type="text" v-model="lastName"><br/>
        全称：<span>{{fullName}}</span>
    </div>
    
    <script type="text/javascript">
        Vue.config.keyCodes.huiche = 13
        new Vue({
            el:"#root",
            data:{
                name:"world",
                firstName:"张",
                lastName:"三",
                fullName:"张-三"
            },
            watch:{
                firstName(val){
                    this.fullName = val + "-" +this.lastName
                },
                lastName(val){
                    this.fullName = this.firstName + "-" + val
                }
            }
        });
    </script>
</body>
</html>